<template>
	<view class="body" v-show="showContent">
		<!-- <view @tap="clear">清除缓存</view> -->
		<view class="partner">
			<view class="img-l">
				<image mode="widthFix" :src="my.image"></image>
				<p>{{my.name}}</p>
			</view>
			<i class="iconfont icon-lazhu" v-if="isBind"></i>
			<i class="iconfont icon-lazhu-copy" v-else></i>
			<view class="img-r">
				<image mode="widthFix" :src="partner.image"></image>
				<p>{{partner.name}}</p>
			</view>
		</view>
		<view class="context">
			<view v-if="partner.name!=''" class="alertNickname">
				<input type="text" v-model="partner.nickname" />
				<i class="iconfont icon-bianji1"></i>
			</view>
			<p v-if="partner.name!=''" class="tips">给ta起个好听的备注吧！</p>
			<view v-if="!isBind">
				<view class="inviteCode">
					我的cl码：{{inviteCode}}
				</view>
				<view class="list">
					<view>
						<button @tap="share">
							<i class="iconfont icon-fenxiang"></i>
						</button>
						<p>通过分享邀请</p>
					</view>
					<view>
						<button @tap="editCode">
							<i class="iconfont icon-bianji"></i>
						</button>
						<p>填写cl码</p>
					</view>
					<view>
						<button @tap="copy">
							<i class="iconfont icon-niantieSHAdaojianqieban"></i>
						</button>
						<p>复制cl码</p>
					</view>
				</view>
			</view>
			<view v-show="isBind" class="enterRoom">
				<button @tap="enterRoom">进入房间</button>
			</view>
		</view>
		<view v-show="showEditCode" class="editCode">
			<input v-model="editPartnerCode" @input="onInput" class="content" type="number" placeholder="请输入ta的cl码"
				maxlength="6" />
		</view>
		<view v-for="(item,index) in inviteList" class="inviteView" v-show="inviteList.length!=0">
			<p class="title">ta想成为你的小伙伴</p>
			<image mode="widthFix" class="inviteImg" :src="item.imgUrl"></image>
			<p class="inviteName">{{item.name}}</p>
			<button style="background-color: royalblue;" @tap="accept(index)">接受</button>
			<button style="background-color: orangered;" @tap="refuse(index)">拒绝</button>
		</view>
		<view v-show="showEditCode||inviteList.length!=0" @tap="closeEdit" class="yy"></view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				my: {
					image: '../../static/logo.png',
					name: '我'
				},
				partner: {
					id: '',
					image: '',
					name: '',
					nickname: ''
				},
				showContent: false,
				inviteCode: '123123',
				isBind: false,
				showEditCode: false,
				editPartnerCode: '',
				ws: null,
				inviteList: [],
				showType: 0
			}
		},
		methods: {
			copy() {
				let that = this
				let code = that.inviteCode.toString()
				uni.setClipboardData({
					data: code,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						})
					}
				});
			},
			share() {
				uni.showToast({
					icon: 'none',
					title: "我也想开这个功能，可惜没有权限：）"
				})
				// uni.share({
				// 	provider: "weixin",
				// 	scene: "WXSceneSession",
				// 	type: 1,
				// 	summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
				// 	success: function (res) {
				// 		console.log("success:" + JSON.stringify(res));
				// 	},
				// 	fail: function (err) {
				// 		console.log("fail:" + JSON.stringify(err));
				// 	}
				// });
			},
			editCode() {
				this.showEditCode = true
			},
			closeEdit() {
				this.showEditCode = false
			},
			onInput() {
				let that = this
				if (that.editPartnerCode.length == 6) {
					let data = {
						type: "inviteUser",
						data: that.editPartnerCode
					}
					let jsonData = JSON.stringify(data);
					uni.sendSocketMessage({
						data: jsonData,
						success() {
							uni.showToast({
								icon: 'none',
								title: '邀请发送成功'
							})
							that.showEditCode = false
						}
					})
					that.editPartnerCode = ''
				}

			},
			enterRoom() {
				let that = this
				uni.setStorageSync("nickName", that.partner.nickname)
				uni.setStorageSync("image", that.partner.image)
				uni.redirectTo({
					url: "/pages/movie/movie"
				})
			},
			refuse(index) {
				this.inviteList.splice(index, 1)
			},
			accept(index) {
				let that = this
				let data = {
					type: "bind",
					data: that.inviteList[index].id
				}
				let jsonData = JSON.stringify(data);
				uni.sendSocketMessage({
					data: jsonData,
					success() {
						uni.showLoading({
							title: "正在通知小伙伴中~"
						})
					}
				})
			},
			clear() {
				uni.removeStorageSync("token")
			}
		},
		onLoad() {
			let that = this
			// let name = uni.getStorageSync("name")
			// let imgUrl = uni.getStorageSync("imgUrl")
			let token = uni.getStorageSync("token")
			if (token == '') {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
			setTimeout(() => {
				uni.hideNavigationBarLoading()
				this.showContent = true
			}, 500)
			this.inviteCode = uni.getStorageSync("inviteCode")
			this.my.name = uni.getStorageSync("name")
			this.my.image = uni.getStorageSync("imgUrl")
			let userId = uni.getStorageSync("userId")
			uni.showShareMenu({
				withShareTicket: true
			})
			uni.showNavigationBarLoading()

			this.ws = uni.connectSocket({
				url: this.url.wsUrl + 'Bind/' + userId,
				success() {
					console.log('WebSocket链接成功');
				}
			});
			this.ajax(this.url.baseUrl + "bind/isBind/" + uni.getStorageSync("userId"), "GET", null, function(r) {
				let data = r.data.data
				console.log(data)
				if (data != false) {
					that.isBind = true
					that.partner.image = data.imgUrl
					that.partner.name = data.name
					let nickName = uni.getStorageSync("nickName")
					if (nickName != '') {
						that.partner.nickname = nickName
					} else {
						that.partner.nickname = data.name
					}
					console.log(that.partner.nickname)
				} else {
					that.isBind = false
					that.partner.image = 'https://candlelight-1252498605.cos.ap-guangzhou.myqcloud.com/nobody.png'
					that.partner.name = ''
					that.ajax(that.url.baseUrl + "bind/inviteList/" + uni.getStorageSync("userId"), "GET", null,
						function(r) {
							if (r.data.data != false && r.data.data != null) {
								that.inviteList = r.data.data
							}
						})
				}


			})

			uni.onSocketMessage(function(res) {
				let data = JSON.parse(res.data)
				console.log(res)
				console.log(data)
				if (data.type == 'msg') {
					uni.showToast({
						icon: 'none',
						title: data.data
					})
				} else if (data.type == 'bindSuccess') {
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: "成功和" + data.data.name + "成为小伙伴"
					})
					that.isBind = true
					that.partner.image = data.data.imgUrl
					that.partner.name = data.data.name
					that.partner.nickname = data.data.name
					that.inviteList = []
				} else if (data.type == 'invite') {
					that.inviteList.push(data.data)
				}
			});
		},
		onUnload() {
			let that = this
			uni.closeSocket({
				success() {
					console.log("关闭成功")
				}
			})
		},
		onHide() {
			let that = this
			uni.closeSocket({
				success() {
					console.log("WebSocket关闭成功")
				}
			})
			that.ws = ''
		},
		onShow() {
			let that = this
			if (that.showType != 0) {
				this.ajax(this.url.baseUrl + "bind/isBind/" + uni.getStorageSync("userId"), "GET", null, function(r) {
					let data = r.data.data
					console.log(data)
					if (data != false) {
						that.isBind = true
						that.partner.image = data.imgUrl
						that.partner.name = data.name
						let nickName = uni.getStorageSync("nickName")
						if (nickName != '') {
							that.partner.nickname = nickName
						} else {
							that.partner.nickname = data.name
						}
						console.log(that.partner.nickname)
					} else {
						that.isBind = false
						that.partner.image = ''
						that.partner.name = ''
						that.ajax(that.url.baseUrl + "bind/inviteList/" + uni.getStorageSync("userId"), "GET",
							null,
							function(r) {
								if (r.data.data != false && r.data.data != null) {
									that.inviteList = r.data.data
								}
							})
					}
				})
				that.ws = uni.connectSocket({
					url: that.url.wsUrl + 'Bind/' + uni.getStorageSync("userId"),
					success() {
						console.log('WebSocket链接成功');
					}
				});
			}
			that.showType++
		}
	}
</script>

<style lang="less">
	@import url('../../static/iconfont/icon.css');

	.body {
		width: 100%;
		height: 100vh;
		background-color: #383838;
		position: relative;

		.yy {
			width: 100%;
			height: 100vh;
			background-color: gray;
			opacity: .9;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 800;
		}

		.partner {
			position: relative;
			width: 100%;
			height: 30vh;

			.img-l,
			.img-r {
				position: absolute;
				width: 100px;
				height: 100px;
				border-radius: 100px;
				top: 50%;
				z-index: 100;

				image {
					border-radius: 100px;
					width: 90px;
					height: 90px;
					border: 2px whitesmoke solid;
					background-color: #383838;
				}

				p {
					text-align: center;
					color: whitesmoke;
					font-size: 10px;
				}
			}

			.img-r {
				right: 20%;
				transform: translateX(50%);
			}

			.img-l {
				left: 20%;
				transform: translateX(-50%);
			}

			i {
				position: absolute;
				top: 30%;
				left: 50%;
				transform: translateX(-50%);
				font-size: 130px;
				z-index: 50;
			}

		}

		.inviteView {
			position: fixed;
			width: 300px;
			height: 250px;
			background-color: #383838;
			z-index: 900;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 30px;

			.title {
				color: ghostwhite;
				font-size: 25px;
				text-align: center;
				margin-top: 30px;
			}

			.inviteImg {
				width: 20%;
				margin-left: 50%;
				border-radius: 50px;
				transform: translateX(-50%);
				margin-top: 10px;
			}

			.inviteName {
				text-align: center;
				margin-top: 5px;
				color: ghostwhite;
			}


			button {
				margin-top: 10px;
				width: 35%;
				float: left;
				margin-left: 10%;
				color: whitesmoke;
			}
		}

		.editCode {
			top: 40%;

			position: fixed;
			z-index: 900;
			left: 50%;
			transform: translateX(-50%);

			.content {
				// margin-top:   25%;
				border-radius: 30px;
				border: 1px solid grey;
				transform: translateY(-50%);
				width: 200px;
				height: 50px;
				transform: translateX(-50%);
				margin-left: 50%;
				font-size: 20px;
				padding-left: 20px;
				background-color: ghostwhite;

			}
		}

		.context {
			position: absolute;
			top: 22%;
			left: 10%;
			width: 80%;
			height: 300px;
			border-radius: 20px;
			border-left: 1px solid whitesmoke;
			border-right: 1px solid whitesmoke;
			border-bottom: 1px solid whitesmoke;
			box-sizing: border-box;

			.tips {
				position: absolute;
				top: 50%;
				left: 55%;
				transform: translateX(-50%);
				font-size: 10px;
				color: floralwhite;
			}

			.alertNickname {
				position: absolute;
				display: flex;
				top: 40%;
				left: 55%;
				transform: translateX(-50%);

				input {
					width: 80%;
					color: ghostwhite;
					text-align: center;
					border-bottom: 1px solid ghostwhite;
				}
			}

			// padding-top: 100px;
			.inviteCode {
				// width: 100%;
				text-align: center;
				height: 30px;
				color: black;
				background-color: aliceblue;
				line-height: 30px;
				font-size: 10px;
				top: 60%;
				width: 50%;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 30px;
			}

			.list {
				color: whitesmoke;
				left: 10%;
				width: 80%;
				position: absolute;
				top: 75%;
				display: flex;
				justify-content: space-between;
				font-size: 10px;

				button {
					width: 40px;
					height: 40px;
				}

				p {
					margin-top: 5px;
				}
			}

			.enterRoom {
				position: absolute;
				width: 60%;
				left: 50%;
				transform: translateX(-50%);
				top: 70%;
			}
		}
	}
</style>
